<template>
	<view class="page">
		<!-- #ifdef H5 -->
			<topVue title="AI轻创业联盟"></topVue>
		<!-- #endif -->

		<scroll-view class="main-content" scroll-y>
			<view class="bannerVue relative">
				<image src="../../static/weChat/7.jpg"></image>
				<text class="absolute" style="left: 30rpx; bottom: 70rpx; color: #fff; font-weight: 600; font-size: 32rpx;">AI轻创业联盟</text>
				<text class="absolute" style="left: 30rpx; bottom: 30rpx; color: #fff;font-size: 26rpx;">开启AI创业新时代</text>
				<view class="more">了解更多</view>
			</view>

			<view class="showVue margin30 flex-between flex-wrap">
				<view class="li flex-column align-center flex-between padding-column30">
					<image src="../../static/entrepreneurship/1.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="font-weight: 600; font-size: 30rpx;">什么是AI轻创业</text>
					<text style="color: #6B97C5; font-size: 26rpx;">了解AI轻创业</text>
				</view>
				<view class="li flex-column align-center flex-between padding-column30">
					<image src="../../static/entrepreneurship/2.png" style="width: 48rpx; height: 48rpx;"></image>
					<text style="font-weight: 600; font-size: 30rpx;">如何开启AI轻创业</text>
					<text style="color: #6B97C5; font-size: 26rpx;">开启A创业之旅</text>
				</view>
				<view class="li flex-column align-center flex-between padding-column30">
					<image src="../../static/entrepreneurship/3.png" style="width: 48rpx; height: 48rpx;"></image>
					<text style="font-weight: 600; font-size: 30rpx;">我是项目方如何...</text>
					<text style="color: #6B97C5; font-size: 26rpx;">合作共赢</text>
				</view>
				<view class="li flex-column align-center flex-between padding-column30">
					<image src="../../static/entrepreneurship/4.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="font-weight: 600; font-size: 30rpx;">项目入口</text>
					<text style="color: #6B97C5; font-size: 26rpx;">项目介绍</text>
				</view>
			</view>

			<view class="item margin30" v-for="(item, index) in 1" :key="index">
				<view class="top">
					<image src="../../static/weChat/6.jpg"></image>
				</view>
				<view class="bot padding30 flex-column flex-between">
					<view class="name">千里达</view>
					<view class="descri line-1">千里达骑行运动装备, 全面保护, 让你在骑行中无后顾之忧!</view>
					<view class="btn">了解更多</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部Tabbar -->
		<u-tabbar
			v-model="$store.state.tabbarCurrent"
			:list="$store.state.tabbar"
			icon-size="70"
			height="120rpx"
			:bg-color="bgColor"
			active-color="#fff"
			inactive-color="#fff"
			@change="tabbarChange"
		></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: "linear-gradient(to right, #49DC83, #3B83F4)"
			}
		},
		onLoad() {

		},
		methods: {
			tabbarChange(index){
				this.$store.state.tabbarCurrent = index;
				uni.setStorageSync("tabbarCurrent", index)
				uni.switchTab({
					url: this.$store.state.tabbar[index].path
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 212rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #EBF3FD, #DBF8E9);
		.bannerVue {
			width: 100%;
			height: 360rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
			.more {
				width: 160rpx;
				height: 66rpx;
				background: #fff;
				line-height: 66rpx;
				text-align: center;
				color: #3B82F6;
				position: absolute;
				bottom: 30rpx;
				right: 20rpx;
				border-radius: 33rpx;
				font-size: 24rpx;
			}
		}
		.showVue {
			width: 100%;
			.li {
				width: 330rpx;
				height: 200rpx;
				background: #fff;
				border-radius: 12rpx;
				margin-bottom: 30rpx;
			}
			.li:nth-child(3),.li:nth-child(4) {
				margin-bottom: 0;
			}
		}
		.item {
			width: 100%;
			height: 520rpx;
			background: #fff;
			border-radius: 12rpx;
			.top {
				width: 100%;
				height: 290rpx;
				background: #EBF3FD;
				image {
					width: 100%;
					height: 290rpx;
					border-radius: 12rpx 12rpx 0 0;
				}
			}
			.bot {
				width: 100%;
				height: 230rpx;
				.name {
					font-weight: 600;
					font-size: 30rpx;
					color: #000;
					line-height: 1;
				}
				.descri {
					color: #6B97C5;
					font-size: 26rpx;
					line-height: 1;
				}
				.btn {
					width: 160rpx;
					height: 58rpx;
					line-height: 60rpx;
					text-align: center;
					color: #fff;
					border-radius: 33rpx;
					background: #3B82F6;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
